<template>
  <div>
    <van-popup
      v-model="isShowColor"
      position="bottom"
      :close-on-click-overlay="false"
      @click-overlay="cancel"
      :overlay="false"
      :duration="duration"
    >
      <div class="top">
        <div class="sure" @click="confirm">完成</div>
      </div>
      <div class="color-title">文字颜色</div>
      <div class="colors">
        <div
          v-for="(item, index) in colors"
          :key="index"
          :class="['color-li', { check: color === item.color }]"
          @click="checkColor(item)"
        >
          <div class="span" :style="{ background: item.color }"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    isShowColor: {
      type: Boolean,
    },
    duration: {
      type: Number,
    },
  },
  data() {
    return {
      colors: [
        {
          color: "#1A1A1A",
        },
        {
          color: "#999999",
        },
        {
          color: "#CD4F39",
        },
        {
          color: "#CB9336",
        },
        {
          color: "#59AA70",
        },
        {
          color: "#449DC5",
        },
        {
          color: "#8E54BB",
        },
        {
          color: "#333333",
        },
        {
          color: "#CCCCCC",
        },
        {
          color: "#FA8B78",
        },
        {
          color: "#F9C36D",
        },
        {
          color: "#88D6A6",
        },
        {
          color: "#6EC8EA",
        },
        {
          color: "#C694EB",
        },
        {
          color: "#666666",
        },
        {
          color: "#E6E6E6",
        },
        {
          color: "#F9C2BB",
        },
        {
          color: "#FADFB2",
        },
        {
          color: "#C0E8CD",
        },
        {
          color: "#B1E2F3",
        },
        {
          color: "#E2C7F2",
        },
      ],
      color: "#000",
    };
  },
  methods: {
    confirm() {
      this.$emit("confirm", this.color);
    },
    cancel() {
      this.$emit("cancel", false);
    },
    checkColor(item) {
      this.color = item.color;
    },
  },
};
</script>

<style lang="scss" scoped>
.colors {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 32px;
  .color-li {
    margin-bottom: 40px;
    margin-right: 38px;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    &:nth-child(7n) {
      margin-right: 0;
    }
    .span {
      width: 64px;
      height: 64px;
      border-radius: 4px;
    }
  }
  .check {
    border: 4px solid #025ce0;
    display: flex;
    justify-content: center;
    align-items: center;
    .span {
      width: 47px;
      height: 47px;
      border-radius: 4px;
    }
  }
}
.top {
  padding: 20px 32px;
  line-height: 33px;
  font-weight: 400;
  font-size: 24px;
  display: flex;
  justify-content: flex-end;
  color: #f27e31;
  align-items: center;
  border-bottom: 2px solid #f6f6f6;
  border-top: 2px solid #f6f6f6;
}
.color-title {
  padding: 32px;
  font-size: 28px;
  font-weight: 400;
  color: #333333;
  line-height: 33px;
}
</style>